<!DOCTYPE html>
<!-- saved from url=(0051)http://getbootstrap.com/examples/navbar-static-top/ -->
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/site.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="./js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="./js/html5shiv.min.js"></script>
      <script src="./js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-fixed-top " role="navigation">
      <div class="container-fluid intel-background-color">
		<div class="row intel-row-margin">
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a href="/" ><img src="./images/logo.png" class="intel-logo-image" /></a>
			</div>
			<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
			  <ul class="nav navbar-nav navbar-right">
				<li><a href="http://getbootstrap.com/examples/navbar/">SYNCS & SUMMITS</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar/">DEVELOPMENT</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar/">PROGRESSION</a></li>
				<li><a href="./Static Top Navbar Example for Bootstrap_files/Static Top Navbar Example for Bootstrap.html">NETWORKING</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar-fixed-top/">VIP SERVICES</a></li>
			  </ul>
			</div><!--/.nav-collapse -->

		</div>
      </div>
    </nav>



    <div class="container-fluid">
      <div class="row intel-ss-row-slots">
		<!--5 slots-->
		<div class="col-sm-6 intel-ss-slot intel-ss-slot-1" style="position: relative; overflow: hidden">
			<!--Slot 1-->
			<img class="intel-ss-image-slot-1" src="./Images/Slot1.png" alt="Image" style="width: 100%" />
			
			<div class="" style="position: absolute; bottom: 0px; left: 0px; width:65%; height: 30%; background-color: green;">
				<!--Tiny bar-->
				<div class="" style="position: absolute; top: 0px; left: 0px; width:100%; height: 5%; background-color: red;">
				</div>
				<!--Content-->
				<div class="" style="position: absolute; bottom: 0px; left: 0px; width:100%; height: 95%; background-color: green;">
					This is description
				</div>
			</div>
		</div>
		<div class="col-sm-6 intel-ss-slot-2345">
			<table>
				<tr>
					<td>
						<!--Slot 2-->
						<div style="position: relative; overflow: hidden">
							<img class="intel-ss-image-slot-2" src="./Images/Slot2.png" alt="Image" style="width: 100%" />
							
							<div class="" style="position: absolute; bottom: 0px; left: 0px; width:65%; height: 30%; background-color: green;">
								<!--Tiny bar-->
								<div class="" style="position: absolute; top: 0px; left: 0px; width:100%; height: 5%; background-color: red;">
								</div>
								<!--Content-->
								<div class="" style="position: absolute; bottom: 0px; left: 0px; width:100%; height: 95%; background-color: green;">
									This is description
								</div>
							</div>
						</div>

					</td>
					<td>
						<!--Slot 3-->
						<div style="position: relative; overflow: hidden">
							<img class="intel-ss-image-slot-3" src="./Images/Slot3.png" alt="Image" style="width: 100%" />
							
							<div class="" style="position: absolute; bottom: 0px; left: 0px; width:65%; height: 30%; background-color: green;">
								<!--Tiny bar-->
								<div class="" style="position: absolute; top: 0px; left: 0px; width:100%; height: 5%; background-color: red;">
								</div>
								<!--Content-->
								<div class="" style="position: absolute; bottom: 0px; left: 0px; width:100%; height: 95%; background-color: green;">
									This is description
								</div>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<!--Slot 4-->
						<div style="position: relative; overflow: hidden">
							<img class="intel-ss-image-slot-4" src="./Images/Slot4.png" alt="Image" style="width: 100%" />
							
							<div class="" style="position: absolute; bottom: 0px; left: 0px; width:65%; height: 30%; background-color: green;">
								<!--Tiny bar-->
								<div class="" style="position: absolute; top: 0px; left: 0px; width:100%; height: 5%; background-color: red;">
								</div>
								<!--Content-->
								<div class="" style="position: absolute; bottom: 0px; left: 0px; width:100%; height: 95%; background-color: green;">
									This is description
								</div>
							</div>
						</div>

					</td>
					<td>
						<!--Slot 5-->
						<div style="position: relative; overflow: hidden">
							<img class="intel-ss-image-slot-5" src="./Images/Slot5.png" alt="Image" style="width: 100%" />
							
							<div class="" style="position: absolute; bottom: 0px; left: 0px; width:65%; height: 30%; background-color: green;">
								<!--Tiny bar-->
								<div class="" style="position: absolute; top: 0px; left: 0px; width:100%; height: 5%; background-color: red;">
								</div>
								<!--Content-->
								<div class="" style="position: absolute; bottom: 0px; left: 0px; width:100%; height: 95%; background-color: green;">
									This is description
								</div>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<div class="col-sm-6">
		</div>
      </div>

    </div> <!-- /container -->

    <!--Footer-->
	<div class="container-fluid intel-container-footer" >
        <div class="row intel-footer intel-row-margin">
            <div class="col-xs-8 text-left intel-text-color-footer">
                © 2014 Intel Executive Forum, All Rights Reserved.
            </div>
            <div class="col-xs-4 text-right">
                <a href="/" class="intel-text-color-footer" style="padding-right: 30px;">Contact</a>
				<a href="/" class="intel-text-color-footer">About</a>
            </div>
        </div>
	</div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
	
	<script>
		function setSlotHeight()
		{
			var slot1Width = $('.intel-ss-slot-1').width();
			var slot1Height = Math.floor((slot1Width * 3) / 4);
			$('.intel-ss-image-slot-1').css({'height':slot1Height+'px'});
			var slot2Height = Math.floor(slot1Height / 2);
			var slot3Height = slot2Height;
			var slot4Height = slot1Height - slot2Height;
			var slot5Height = slot4Height;
			
			var slot2345Width = $('.intel-ss-slot-2345').width();
			var slot2Width = Math.floor(slot2345Width / 2);
			var slot3Width = slot2345Width - slot2Width;
			var slot4Width = slot2Width;
			var slot5Width = slot3Width;
			
			$('.intel-ss-image-slot-2').css({'height':slot2Height+'px'});
			$('.intel-ss-image-slot-3').css({'height':slot3Height+'px'});
			$('.intel-ss-image-slot-4').css({'height':slot4Height+'px'});
			$('.intel-ss-image-slot-5').css({'height':slot5Height+'px'});

			$('.intel-ss-image-slot-2').css({'width':slot2Width+'px'});
			$('.intel-ss-image-slot-3').css({'width':slot3Width+'px'});
			$('.intel-ss-image-slot-4').css({'width':slot4Width+'px'});
			$('.intel-ss-image-slot-5').css({'width':slot5Width+'px'});

		}

		$(function(){
			setSlotHeight();
			$( window ).resize(function() {
				setSlotHeight();
			});
			
			//setTimeout(setSlotHeight, 1);
		});

		
	</script>
  

</body></html>